<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import { filterMenus } from "@/grants/menu"
const currMenus = filterMenus();

</script>

<template>
  <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2"
    text-color="#fff" router>
    <!-- 循环用户权限数据 -->
    <template v-for="item in currMenus" :key="item.id">
      <!-- 判断如果children 就显示 -->
      <el-sub-menu v-if="item.children" :index="item.id">
        <template #title>
          <el-icon>
            <!-- 表头 -->
            <Document></Document>
          </el-icon>
          <span>{{ item.title }}</span>
        </template>
        <!-- 再循环item的children  index为路由匹配项-->
        <el-menu-item v-for="childrenitem in item.children" :index="childrenitem.path">
          <el-icon>
            <!-- 表的子级选项 -->
            <Location></Location>
          </el-icon>
          <span>{{ childrenitem.title }}</span>
        </el-menu-item>
      </el-sub-menu>

      <!-- 反之没有子级选项的  就直接显示表头-->
      <el-menu-item v-else :index="item.path">
        <el-icon>
          <Document />
        </el-icon>
        <span>{{ item.title }}</span>
      </el-menu-item>
    </template>



  </el-menu>
</template>

<style lang="scss" scoped></style>
